<template>
  <div class="calendar-add">
    <Navbar :title="title" />
    <div class="calendar-content">
      <div class="date-info">
        <span @click="handleClickDateStr">{{ dateStr }}</span>
        <img src="@/assets/icon/icon-down.png" />
      </div>
      <div class="input-wrapper">
        <textarea v-model="text" rows="20" type="textarea" placeholder="请添加描述" />
      </div>
      <div class="btn-add" @click="confirm">{{ btnText }}</div>
    </div>
    <van-calendar
      v-model:show="showCalendar"
      :default-date="currentDjs.toDate()"
      @confirm="onConfirm"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import dayjs from 'dayjs'
import { useRoute, useRouter } from 'vue-router'
import CalendarServe from '@/api/calendar.ts'
import Navbar from '@/components/Navbar/index.vue'
import { showToast } from 'vant'

const route = useRoute()
const router = useRouter()
const showCalendar = ref<boolean>(false)
const handleClickDateStr = () => {
  showCalendar.value = true
}
const { date, id, content } = route.query
const text = ref<string>(content || '')

const currentDjs = ref<dayjs.Dayjs>(dayjs(date as string))
// const dateText = ref<string>(date)

const dateStr = computed(() => {
  return currentDjs.value.format('YYYY年MM月DD日')
})

const onConfirm = date => {
  console.log(date)
  currentDjs.value = dayjs(date)
  //   dateText.value =
  showCalendar.value = false
}

const isEdit = computed<boolean>(() => {
  return !!id
})

const title = computed(() => {
  if (isEdit.value) {
    return '编辑日程'
  } else {
    return '添加日程'
  }
})
const btnText = computed(() => {
  if (isEdit.value) {
    return '更新日程'
  } else {
    return '添加日程'
  }
})

const confirm = () => {
  if (!text.value) {
    return showToast('请添加描述')
  }
  if (isEdit.value) {
    CalendarServe.update({
      id: id,
      content: text.value,
      scheduleDate: currentDjs.value.format('YYYY-MM-DD')
    }).then(() => {
      showToast('日程更新成功')
      router.back()
    })
  } else {
    CalendarServe.add({
      content: text.value,
      scheduleDate: currentDjs.value.format('YYYY-MM-DD')
    }).then(() => {
      showToast('日程添加成功')
      router.back()
    })
  }
}
</script>

<style lang="less" scoped>
.calendar-add {
  :deep(.van-calendar__selected-day) {
    background: #3a75c5;
  }
  :deep(.van-button--primary) {
    background: #3a75c5;
    border-color: #3a75c5;
  }
  overflow: hidden;
  .date-info {
    height: 48px;
    font-size: 16px;
    padding-left: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    img {
      width: 9px;
      height: 6px;
      margin-left: 4px;
    }
  }
  .input-wrapper {
    textarea {
      padding: 16px;
      font-size: 15px;
      width: 100vw;
      border: none;
      outline: none;
      box-sizing: border-box;
    }
  }
  .btn-add {
    position: fixed;
    height: 44px;
    width: 320px;
    background-color: #3a75c5;
    box-shadow: 0px 2px 5px 0px #00000019;
    border-radius: 25px;
    text-align: center;
    color: #fff;
    line-height: 44px;
    font-size: 16px;
    left: 27.5px;
    bottom: 36px;
  }
}
</style>
